<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" plain  @click="syncFans" v-auth="'wechat.wechatOfficialAccountFans.sync'">粉丝同步</el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <sc-select v-model="search.appId" :apiObj="$API.wechat.wechatAccount.getSelectItem" placeholder="公众号账号"  clearable filterable style="width:240px" ></sc-select>
          <el-input type="text" v-model="search.openId" placeholder="openId" clearable></el-input>
          <el-input type="text" v-model="search.nickName" placeholder="昵称" clearable></el-input>
          <el-date-picker style="width: 100%" v-model="search.city" type="daterange" value-format="YYYY-MM-DD"  start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker>
          <el-select  style="width: 100%" v-model="search.subscribe" placeholder="是否关注" clearable >
            <el-option value="0">否</el-option>
            <el-option value="0">是</el-option>
          </el-select>
          <el-button type="primary" icon="el-icon-search" @click="upSearch"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="#" type="index" width="50"></el-table-column>
        <el-table-column label="openId" prop="openId" width="150"></el-table-column>
        <el-table-column label="昵称" prop="nickName" width="120"></el-table-column>
        <el-table-column label="性别" prop="sex" width="100"></el-table-column>
        <el-table-column label="城市" prop="city" width="120"></el-table-column>
        <el-table-column label="头像" prop="headImgUrl" width="120"></el-table-column>
        <el-table-column label="标签" prop="tagList" width="130"></el-table-column>
        <el-table-column label="订阅时间" prop="subscribeTime" width="120"></el-table-column>
        <el-table-column label="场景值" prop="subscribeScene" width="120"></el-table-column>
        <el-table-column label="是否关注" prop="subscribe" width="120"></el-table-column>
        <el-table-column label="操作" fixed="right" align="right" width="160">
          <template #default="scope">
            <el-button-group>
              <el-button type="primary" text size="small" @click="table_show(scope.row, scope.$index)" v-auth="'wechat.wechatOfficialAccountFans.detail'">查看</el-button>
              <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)" >
                <template #reference>
                  <el-button type="primary" text size="small" v-auth="'wechat.wechatOfficialAccountFans.deleteBatch'">删除</el-button>
                </template>
              </el-popconfirm>
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <!-- 详情dialog -->
  <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
import saveDialog from './save.vue'
export default {
  name: 'wechatOfficialAccountFans-manage',
  components: {
    saveDialog
  },
  data() {
    return {
      dialog: {
        save: false,
        config: false
      },
      selection: [],
      apiObj: this.$API.wechat.wechatOfficialAccountFans.pageList,
      search: {
        openId: null,
        nickName: null,
        city: null,
        subscribeScene: null,
        subscribe: null,
      }
    }
  },
  methods: {
    //添加
    add(){
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open()
      })
    },
    async syncFans(){
      let appId = this.search.appId;
      if(!appId){
        this.$message.error("请选择公众号账号");
        return;
      }
      const loading = this.$loading();
      let res = await this.$API.wechat.wechatOfficialAccountFans.sync.get(appId);
      if(res.success){
        this.$message.success("同步任务建立成功");
      }
      loading.close();
    },
    //编辑
    async table_edit(row){
      const loading = this.$loading();
      let res = await this.$API.wechat.wechatOfficialAccountFans.detail.get(row.id);
      if(res.success){
        this.dialog.save = true
        this.$nextTick(() => {
          this.$refs.saveDialog.open('edit').setData(row)
        })
      }
      loading.close();
    },
    //查看
    async table_show(row){
      const loading = this.$loading();
      let res = await this.$API.wechat.wechatOfficialAccountFans.detail.get(row.id);
      if(res.success){
        this.dialog.save = true
        this.$nextTick(() => {
          this.$refs.saveDialog.open('show').setData(row)
        })
      }
      loading.close();
    },
    //删除
    async table_del(row){
      let res = await this.$API.wechat.wechatOfficialAccountFans.delete.delete(row.id);
      if(res.success){
        this.$refs.table.refresh()
        this.$message.success("删除成功")
      }
    },
    //批量删除
    async batch_del(){
      this.$confirm('确定删除选中的'+this.selection.length+'项吗？', '提示', {
        type: 'warning'
      }).then(async() => {
        const loading = this.$loading();
        let ids = ""
        this.selection.forEach(function(e) {
          ids += e.id + ","
        })
        ids = ids.substring(0, ids.length - 1)
        let res = await this.$API.wechat.wechatOfficialAccountFans.delete.delete(ids);
        if(res.success){
          this.$refs.table.refresh()
          this.$message.success("操作成功")
        }
        loading.close();
      }).catch(() => {

      })
    },
    //表格选择后回调事件
    selectionChange(selection){
      this.selection = selection;
    },
    //搜索
    upSearch(){
      this.$refs.table.upData(this.search)
    },
    //本地更新数据
    handleSaveSuccess(){
      this.$refs.table.refresh()
    }
  },
  mounted() {
  }
}
</script>

<style>
</style>